<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜作业</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .web {
        display: flex;
        height: 100vh;
      }
      .left {
        flex: 2;
        background-color: pink;
        /* display: none; */
      }
      .right {
        flex: 8;
      }
      .top {
        background-color: skyblue;
        height: 300px;

        position: relative;
        text-align: center;
        padding-top: 60px;
        box-sizing: border-box;
      }
      .top > button {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 60px;
        height: 30px;
        border-radius: 10px;
        cursor: pointer;
      }
      .content {
        color: aliceblue;
      }
      .content > button {
        margin-top: 10px;
        width: 50px;
        height: 25px;
        border-radius: 8px;
        cursor: pointer;
      }
      main {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      main > ul {
        width: 300px;
        height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      main > ul li {
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        border: solid;
        text-align: center;
        cursor: pointer;
      }
      main > .text {
        width: 400px;
        height: 350px;
        /* background-color: aqua; */
        border-left: solid 2px black;
      }
      .text-top {
        display: flex;
        justify-content: space-around;
      }

      .look ul li {
        margin: 0 auto;
        width: 300px;
        display: flex;
        justify-content: space-between;
      }
      .look ul li > span:last-child {
        position: relative;
      }
      .look ul li > span:last-child::before {
        content: '$';
        position: absolute;
        left: -14px;
      }
    </style>
  </head>
  <body>
    <div class="web">
      <div class="left" style="display: none">
        <ul>
          <li>主页</li>
          <li>排行榜</li>
          <li>练习方式</li>
        </ul>
      </div>
      <div class="right">
        <div class="top">
          <button class="nav">导航栏</button>

          <div class="content">
            <h1>欢迎来到富豪榜</h1>
            <p>weclome to the rich rank</p>
            <button>登录</button>
          </div>
        </div>
        <main>
          <ul>
            <li class="add">添加账号</li>
            <li class="double">资金翻倍</li>
            <li class="query">查询百万富豪</li>
            <li class="sort">财富榜</li>
            <li class="sum">计算总额</li>
          </ul>
          <div class="text">
            <div class="text-top">
              <span>Person</span>
              <span>Wealth</span>
            </div>
            <div class="look">
              <ul>
                <!-- <li><span>1</span><p><span>2</span></p></li> -->
              </ul>
            </div>
          </div>
        </main>
      </div>
    </div>
    <script>
      let dataInfo = [
        { name: 'English chan', money: 392001 },
        { name: 'alex chan', money: 568932 },
        { name: 'melon chan', money: 698756 },
        { name: 'Clare Langner', money: 292489 },
        { name: 'Abigail Rice', money: 953957 },
        { name: 'Clarice Dias', money: 168472 },
        { name: 'Vernon Lucas', money: 718225 },
        { name: 'Nina Schmidt', money: 889147 },
      ];
      let btn = document.querySelector('.nav');
      let left = document.querySelector('.left');
      let lis = document.querySelectorAll('main ul>li');
      let textUl = document.querySelector('.look ul');
      // console.log(lis);
      //导航栏按钮
      
      btn.onclick = () =>left.style.display =left.style.display=='block'? 'none':'block';
      let num = 0;//计数 添加账号点击了几次
      let arr= []
      lis.forEach((ele, index) => {
        ele.onclick = () => {
          
          
          //添加账号
          if (ele.className === 'add') {
            // addDate()
            if (num >= dataInfo.length) return;
            arr[num]=dataInfo[num].money-0
            textUl.innerHTML += `<li><span>${dataInfo[num].name}</span><span>${arr[num].toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}</span></li>`;
            num++;
            
          }
          
          // 资金翻倍
          if (ele.className === 'double') {
            textUl.innerHTML=''
            for(let i=0;i<arr.length;i++){
              arr[i]*=2
              textUl.innerHTML += `<li><span>${dataInfo[i].name}</span><span>${arr[i].toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}</span></li>`;
            }
            
          }
           
          //查询
          if (ele.className === 'query') {
            textUl.innerHTML = '';
            
            for (let i = 0; i < arr.length; i++) {
              if (arr[i] >= 1000000) {
                textUl.innerHTML += `<li><span>${dataInfo[i].name}</span><span>${arr[i].toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}</span></li>`;

              }else{
                num=0
              }
            }
          }
          //榜单
          if (ele.className === 'sort') {
            let arr2 =[]
            for(let j=0;j<arr.length;j++){
              arr2.push(dataInfo[j])
            }
            
            arr2.sort((a, b) => b.money-a.money);  //从大到小排序
            // 名字从大到小
            textUl.innerHTML = '';
            for (let i = 0; i < arr.length; i++) {textUl.innerHTML += `<li><span>${arr2[i].name}</span><span>${arr2[i].money.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}</span></li>`; }
          }
          //计算总额
          if (ele.className === 'sum') {
            let  sums= 0
            for (let i = 0; i < arr.length; i++) {sums += arr[i]}
            textUl.innerHTML += `<li><span>总额:</span><span>${sums.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}</span></li>`;}
        };
      });
    </script>
  </body>
</html>
